<template>
    <div>
        <a href="/Add">新增</a>
        <input type="text" v-model="ts.name">
        <input type="button" value="查询" @click="sss">
        <table>
            <thead>
                <tr>
                    <td>门店编号</td>
                    <td>门店名称</td>
                    <td>门店信息</td>
                    <td>营业时间</td>
                    <td>门店详情</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in datta">
                    <td>{{ a.id }}</td>
                    <td>{{ a.name }}</td>
                    <td>{{ a.xing }}</td>
                    <td>{{ moment(a.dates).format("YYYYMMDD") }}</td>
                    <td>{{ a.jieshao }}</td>
                    <td>
                        <input type="button" value="详情" @click="xiang(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        当前第{{ ts.index }}页,一共{{ zys.list }}条,每页{{ ts.size }}条,一共{{ zys.row }}页
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import moment from 'moment';
import { ssrRenderList } from 'vue/server-renderer';
const routher=useRouter();

const sss=()=>{
    ts.value.index=1
    show()
}

//详情
const xiang=(val:any)=>{
    routher.push({path:"/Xian",query:{id:val}})
}

const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}

const ts=ref({
    index:1,
    size:2,
    name:''
})

const zys=ref({
    list:0,
    row:0
})

onMounted(()=>{
    show();
})
const show=()=>{
    axios.get("https://localhost:7264/api/Member/GetMembers",{params:ts.value}).then(res=>{
        datta.value=res.data.row;

        zys.value.list=res.data.count;
        zys.value.row=Math.ceil(res.data.count/ts.value.size);
    })
}

const datta=ref([{
  "id": 0,
  "name": "",
  "dates": "",
  "xing": "",
  "jieshao": ""
}])
</script>

<style scoped>

</style>